<template>
    <div>
        <banner></banner>
        <div class="city" @click="handOnClick">{{$store.state.city.name}}</div>
        <van-tabs animated  sticky v-model:active="activeName"  swipeable>
            <van-tab title="正在热映" to="/flims/nowPlaying" name="a"> </van-tab>
            <van-tab title="即将上映" to="/flims/comingSoon" name="b">  </van-tab>
        </van-tabs>
         <router-view></router-view>
    </div>
</template>
<script>
import banner from '../components/Banner'
export default {
  data () {
    return {
      activeName: 'a'
    }
  },
  components: {
    banner
  },
  mounted () {
    if (window.location.pathname === '/flims/comingSoon') {
      this.activeName = 'b'
    }
  },
  methods: {
    handOnClick () {
      this.$router.push('/city')
    }
  }
}
</script>
<style lang="scss" scoped>
.city{
  background-color: rgba(150, 148, 148, 0.74);
  color: white;
  position: absolute;
  left: 15px;
  top: 20px;
  padding: 5px 8px;
  border-radius: 8px;
}
</style>
